<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 同时设置left 整体靠左
           right       整体靠右  => 调换html的结构的顺序
           display:block + 水平排列
          */
        .main{font-size:50px;color:red;border:10px solid #000;}
        .left{width: 236px;height:300px;background-color: rebeccapurple;}
        .right{width: 992px;height:300px;background-color: blue;}

        .left{float: left;}
        .right{float: left;}

        /* 清浮动的代码片段 minix  复用 rest.min.css */
        .clearfix::after{
            content: "";
            display: block;
            clear: both;

            font-size:0;
            width:0;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }
        .clearfix{
            *zoom:1;
        }

        .red,.green{width: 300px;height: 300px;}
        .red{background-color: red;}
        .green{background-color: green;}
    </style>
</head>
<body>
    <!-- display:table/inline-block/inline/block
    float: 水平布局
    float:left/right/none(默认)
    问题: 子元素浮动 => 导致父元素高度为height:0 (高度塌陷)  => BFC(不会把浮动元素的高度计算进行)
    面试题: 如何清浮动(多少种) => 方案有哪些优缺点 => 原理是什么？
    + 添加高度 height=内容的高度   优点:属性设置简单   缺点: 高度写死  (不建议使用)
    + BFC(overflow:hidden)       优点:属性设置简单   缺点: 溢出隐藏(下拉框)  
    + clear:both （float的天敌clear） 优点:css专门用来清浮动的属性 缺点: 添加很多无意义的空标签 
      -  块特定的元素 div
      -  空内容
      -  clear:both
    + 利用伪元素::after (最常用)    优点:复用  缺点: 样式太多  
    
    浮动:
    - 让元素消失的方法(越多越好)  display:none + opacity:0 
    -  display:none ,opactity:0, overflow: hidden(超出); 和 visibility: hidden; 区别
    -  display取值？
    -  行内的分类及相互转化
    -  overflow:hidden 的多个作用
    -  BFC原理

    -->
    <div class="red"></div>
    <div class="green"></div>

    <div class="main clearfix">
        <div class="left">1</div>
        <div class="right">2</div>
        <!-- <div style="clear: both;"></div> -->
    </div>
    <ul>
        <li>珠峰培珠峰培训珠峰培训珠峰培训训</li>
        <li>珠峰培珠峰培训珠峰培训珠峰培训训</li>
        <li>珠峰培珠峰培训珠峰培训珠峰培训训</li>
        <li>珠峰培珠峰培训珠峰培训珠峰培训训</li>
    </ul>

</body>
</html>